<%+header%>     
<style>
@media screen and (min-width:1024px) and (max-width:1366px){  
	html{
		height:245%;
	}
} 
@media screen and (min-width:1366px) and (max-width:1440px){  
	html{
		height:245%;
	}
} 	
@media screen and (min-width:1440px) and (max-width:1600px){  
	html{
		height:200%;
	}
} 
@media screen and (min-width:1600px) and (max-width:1920px){  
	html{
		height:190%;
	}
} 
@media screen and (min-width:1920px) and (max-width:2000px){  
	html{
		height:155%;
	}
}
.dnDelete {
    width: 65px;
    height: 26px;
    display: inline-block;
    line-height: 26px;
    padding: 0;
    box-sizing: border-box;
    background-color: #F2F2F2;
    color: #4A4A4A;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    margin-right: 3px;
}
.dmzDelete {
    width: 65px;
    height: 26px;
    display: inline-block;
    line-height: 26px;
    padding: 0;
    box-sizing: border-box;
    background-color: #F2F2F2;
    color: #4A4A4A;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    margin-right: 3px;
}
</style>                                                               
<div class="fWContainers">
    <div class="fWport">
        <div class="title">
            <span>端口转发</span>
        </div>
        <div class="titLine" style="width: 100%;height: 2px;"></div>
        <form action="" class="layui-form" id="addport">
            <table class="fWportLists">
				<thead>
                <tr>
                    <th>名称</th>
                    <th>匹配规则</th>
                    <th>转发到</th>
                    <th>开启</th>
                    <th>排序</th>
                    <th>操作</th>
                </tr>
				</thead>
				<tbody>
					<tr class="fwSearch">
    	                <td style="color: #b1b1b1;">正在刷新...</td>
        	            <td></td>
                    	<td></td>
            	        <td></td>
                	    <td></td>
    		            <td></td>
	                </tr>
				</tbody>
            </table>
        </form>
    </div>

    <div class="fWAddport">
        <div class="title">
            <span>新建端口转发</span>
        </div>
        <div class="titLine" style="width: 100%;height: 2px;"></div>
        <form action="" id="addPortChange">
            <table class="fWAddportLists">
                <tr>
                    <th>名称</th>
                    <th>协议</th>
                    <th>外网区域</th>
                    <th>外部端口</th>
                    <th>内部区域</th>
                    <th>内部IP地址</th>
                    <th>内部端口</th>
                </tr>
                <tr>
                    <td>
                        <input name="forwards_add_name" type="text" class="addPortInput forwards_add_name"/>
                    </td>
                    <td>
                        <select name="forwards_add_proto" class="addPortSelect forwards_add_proto">
                            <option value="tcp udp">TCP + UDP</option>
                            <option value="tcp">TCP</option>
                            <option value="udp">UDP</option>
                        </select>
                    </td>
                    <td>
                        <select name="forwards_add_src" class="addPortSelect forwards_add_src">
                            <option value="wan">wan</option>                            
                        </select>
                    </td>
                    <td>
                        <input name="forwards_add_src_dport" type="text" class="addPortInput forwards_add_src_dport"/>
                    </td>
                    <td>
                        <select name="forwards_add_dest" class="addPortSelect forwards_add_dest">
                            <option value="lan">lan</option>
                        </select>
                    </td>
                    <td>
						<input name="forwards_add_dest_ip" type="text" class="addPortInput forwards_add_dest_ip"/>
                    </td>
                    <td>
                        <input name="forwards_add_dest_port" type="text" class="addPortInput forwards_add_dest_port"/>
                    </td>
					<td style="display: none;">
                        <input name="but_addforwards" type="text" class="addPortInput addPortClick" value="0"/>
                    </td>
                </tr>

            </table>
            <div class="addPortBtns">
                <button type="button" class="addPortBtn aPBtn">添加</button>
            </div>
        </form>
    </div>

    <div class="fWMACFilter">
        <div class="title">
            <span>MAC地址过滤</span>
        </div>
        <div class="titLine" style="width: 100%;height: 2px;"></div>
        
            <table class="fWMACFilterLists">
                <tr>
                    <th>源端口</th>
                    <th>目的端口</th>
                    <th>源MAC地址</th>
                    <th>动作</th>
                    <th>操作</th>
                </tr>
				<tr class="macfilterSearch">
    	            <td style="color: #b1b1b1;">正在刷新...</td>
        	        <td></td>
                    <td></td>
            	    <td></td>
                	<td></td>
	            </tr>
            </table>
			<form action="" id="macAddForm">
            	<div class="fWaddMACFilter">
                	<select name="macfilter_add_src" class="fWMACSelect">
                    	<option value="lan">lan</option>
                    	<option value="wan">wan</option>
	                </select>
    	            <select name="macfilter_add_dest" class="fWMACSelect">
         	            <option value="wan">wan</option>
						<option value="lan">lan</option>            	        
                	</select>
                	<input name="macfilter_add_src_mac" type="text" class="fWMACInput macfilter_add_src_mac">
	                <select name="macfilter_add_target" class="fWMACSelect">
    	                <option value="REJECT">REJECT</option>
        	            <option value="ACCEPT">ACCEPT</option>
            	    </select>
					<input type="text" class="addMacClick" style="display: none;" name="but_addmacfilter" value="0" />
                	<button type="button" class="addMACFilterBtn">添加</button>  <!-- name="but_addmacfilter" -->
	            </div>
    	    </form>
    </div>

    <div class="fWDomainFilter">
        <div class="title">
            <span>域名过滤</span>
        </div>
        <div class="titLine" style="width: 100%;height: 2px;"></div>        
            <table class="fWDomainFilterLists">
                <tr>
                    <th>域名</th>
                    <th>动作</th>
                    <th>操作</th>
                </tr>
				<tr class="DFilterSearch">
    	            <td style="color: #b1b1b1;">正在刷新...</td>
        	        <td></td>
                    <td></td>
	            </tr>
            </table>
			<form action="" id="addDomainForm">
    	        <div class="fWaddDomainFilter">
        	        <input name="dn_add_str" type="text" class="fWDomainInput">
					<input type="text" class="adddnClick" style="display: none;" name="but_adddn" value="0" />
                	<button type="button" class="addDomainFilterBtn">添加</button>    <!-- name="but_adddn" -->
	            </div>
    	    </form>
    </div>



    <div class="fWDMZ">
        <div class="title">
            <span>DMZ</span>
        </div>
        <div class="titLine" style="width: 100%;height: 2px;"></div>
        
            <table class="fWDMZLists">
                <tr>
                    <th>源端口</th>
                    <th>协议</th>
                    <th>目的IP</th>
                    <th>动作</th>
                    <th>操作</th>
                </tr>
            </table>
        <form action="" id="addDmzForm">
		    <div class="fWaddDMZFilter">
                <select name="dmz_add_src" class="fWDMZSelect">
                    <option value="wan">wan</option>
					<option value="lan">lan</option>
                </select>
                <select name="dmz_add_proto" class="fWDMZSelect">
                    <option value="all">all</option>
                    <option value="udp">udp</option>
                    <option value="tcp">tcp</option>
                </select>
                <input name="dmz_add_ip" type="text" class="fWDMZInput">
				<input type="text" class="adddmzClick" style="display: none;" name="but_adddmz" value="0" />
                <button type="button" class="addDMZBtn">添加</button>   <!-- name="but_adddmz" -->

            </div>
        </form>
    </div>
</div>
<script>
var dntab=<%=dntab%>
var dmztab=<%=dmztab%>
var macfiltertab=<%=macfiltertab%>
var forwardstab=<%=forwardstab%>
console.log(dntab) //域名过滤
console.log(dmztab) //dmz
console.log(macfiltertab) //mac地址过滤
console.log(forwardstab) //端口转发
	/*
	**获取端口转发信息
	*/
	var fWportLists = $('.fWportLists');
	var fWTables = forwardstab;
	$('.fWportLists').children('.fwLists').remove();
	if((fWTables.length < 1) || JSON.stringify(fWTables ) == "{}"){
        	$('.fwSearch').remove();
        	var html = '<tr class="fwLists"><td style="color:#b1b1b1;">暂无端口转发</td><td></td><td></td><td></td><td></td><td></td></tr>';
        fWportLists.append(html);
    } else {
		$('.fwSearch').remove();
		for (var c = 0; c < fWTables.length; c++) {
	        	html = '<tr class="fwLists" order="'+ fWTables[c].sname +'">' +
                	'       <td>'+ fWTables[c].name +'</td>' +
	                '       <td>'+ fWTables[c].matchstr +'</td>' +
                	'       <td>'+ fWTables[c].forwardstr +'</td>' +
        	        '       <td>' +
					'			<input type="text" style="display: none;" class="sname" name="forwards_sname" value="'+ fWTables[c].sname +'"/>'+
	                '           <div class="layui-form-item">' +
                	'               <div class="layui-input-block">';
        	        var onCheck = (fWTables[c].enabled) == 0 ? '':(fWTables[c].enabled) == 1 ? 'checked': '';
	                html+='            <input type="checkbox" name="switch" lay-skin="switch" lay-filter="switch'+ c +'" '+ onCheck +' />' +
                	'               </div>' +
        	        '           </div>' +
	                '       </td>' +
                	'       <td>' +
        	        '           <button type="button" class="derectBtn" onclick="moveUp(this)" derection="1" orderbtn="'+ c +'" name="but_reoforwards">↑</button>' +
            		'           <button type="button" class="derectBtn" onclick="moveDown(this)" derection="0" orderbtn="'+ c +'" name="but_reoforwards">↓</button>' +
		            '       </td>' +
    		        '       <td>' +
					'			<input type="text" style="display: none;" class="sname" name="forwards_sname" value="'+ fWTables[c].sname +'"/>'+
					'			<input type="text" name="but_remforwards" class="addportdel" style="display: none;" value="0"/>' +
            		'           <button type="button" class="deleteBtn">删除</button>' +
		            '       </td>' +
    		        '  </tr>'			
	            	fWportLists.append(html);
        	}
	}

	/*
	**获取mac地址过滤信息
	*/
	var macFilterLists = $('.fWMACFilterLists');
	var macfilterTab = macfiltertab;
	$('.fWMACFilterLists').children('.macFLists').remove();

	if((macfilterTab.length < 1) || JSON.stringify(macfilterTab) == "{}"){
        	$('.macfilterSearch').remove();
        	var html = '<tr class="macFLists"><td style="color:#b1b1b1;">暂无需要过滤的MAC地址</td><td></td><td></td><td></td><td></td></tr>';
        macFilterLists.append(html);
    } else {
		$('.macfilterSearch').remove();
		for (var m = 0; m < macfilterTab.length; m++) {
	        html = '<tr class="macFLists">'+
                    '<td>'+ macfilterTab[m].src +'</td>'+
                    '<td>'+ macfilterTab[m].dest +'</td>'+
                    '<td>'+ macfilterTab[m].src_mac +'</td>'+
                    '<td>'+ macfilterTab[m].target +'</td>'+
                    '<td><button type="button" class="MACDelete" name="'+ macfilterTab[m].sname +'">删除</button></td>'+
                '</tr>';		
	        macFilterLists.append(html);
        }
	}
	
	/*
	**获取域名过滤信息
	*/
	var D_FilLists = $('.fWDomainFilterLists');
	var D_FilMsg = dntab;
	$('.fWDomainFilterLists').children('.D_FLists').remove();
	
	if((D_FilMsg.length < 1) || JSON.stringify(D_FilMsg) == "{}"){
        	$('.DFilterSearch').remove();
        	var html = '<tr class="D_FLists"><td style="color:#b1b1b1;">暂无需要过滤的域名</td><td></td><td></td></tr>';
        D_FilLists.append(html);
    } else {
		$('.DFilterSearch').remove();
		for (var d = 0; d < D_FilMsg.length; d++) {
	        html = '<tr class="D_FLists">'+					
                    '<td name="but_remdn">'+ D_FilMsg[d].dn +'</td>'+
                    '<td>'+ D_FilMsg[d].target +'</td>'+
                    '<td>'+
					'   <input type="text" name="but_remdn" class="removeDn" style="display: none;" value="'+ D_FilMsg[d].dn +'" />'+
					'	<button type="button" class="dnDelete" name="but_adddn">删除</button>'+
					'</td>'+
                '</tr>';		
	        D_FilLists.append(html);
        }
	}
	/*
	**获取DMZ信息
	*/
	var DMZLists = $('.fWDMZLists');
	var DMZmsg = dmztab;
	$('.fWDMZLists').children('.DMZchild').remove;
	if((DMZmsg.length < 1) || JSON.stringify(DMZmsg) == "{}"){
		$('.DMZSearch').remove();
		var html = '<tr class="DMZchild"><td style="color:#b1b1b1;">暂无需要过滤的域名</td><td></td><td></td><td></td><td></td></tr>';
        DMZLists.append(html);
	} else {
		$('.DMZSearch').remove();
		for (var z = 0; z < DMZmsg.length; z++) {
	        html = '<tr class="DMZchild">'+					
                    '<td>'+ DMZmsg[z].src +'</td>'+
                    '<td>'+ DMZmsg[z].proto +'</td>'+
                    '<td>'+ DMZmsg[z].dest_ip +'</td>'+
                    '<td>'+ DMZmsg[z].target +'</td>'+
                    '<td>'+
					'	<button type="button" class="dmzDelete" name="'+ DMZmsg[z].sname +'">删除</button>'+
					'</td>'+
                '</tr>';		
	        DMZLists.append(html);
        }
	}
	

	var itemss=sessionStorage.getItem("index");
    $(window).scroll(function(){//开始监听滚动条
        var topp = $(document).scrollTop();
	    $('.fWContainers').css('top',490-topp);
	    $('#type'+ itemss).siblings().css('top',174-topp);
            if(topp > 65){
		$('header').css('visibility',"hidden");
            }else{
   		$('header').css('visibility',"visible");
	    }
    });
	


</script>
<script src="/luci-static/resources/layui/layui.all.js?v=firewall"></script>
<script>
  	layui.use(['form'], function(){
        var form = layui.form;
		var $= layui.jquery;
        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
		var itemLists = $('.fwLists');
		for(var i = 0; i < itemLists.length; i++){
			form.on("switch(switch"+ i +")", function(data){
    			console.log(data.elem); //得到checkbox原始DOM对象
    	        console.log(data.elem.checked); //是否被选中，true或者false
            	console.log(data.value); //复选框value值，也可以通过data.elem.value得到
            	console.log(data.othis); //得到美化后的DOM对象
				var indexStr = $(data.elem).parent().parent().siblings().val();
				
				var swithStr = 'forwards_sname=' + indexStr + '&but_openforwards=' + data.elem.checked;
	        	registPost(swithStr);
    	    	event.preventDefault();
        	});
		}		
    });
	
	var delStr = 0;
    $('.deleteBtn').on('click',function () {
		delStr = 1;
		var indexStr = $(this).siblings('.sname').val();

		var addportform = 'forwards_sname=' + indexStr + '&but_remforwards=' +delStr;
        registPost(addportform);
        event.preventDefault();
    });

    function registPost (formModal) {
        $.ajax({
            type: "post",
            url: "<%=REQUEST_URI%>",
            data: formModal
        }).success(function(message) {
            console.log(message);
			window.location.reload();
        }).fail(function(err){
            console.log(err);
        })
    }
	/*
	**封装列表上移、下移函数
	**传入参数为当前按钮
	*/
    function moveUp(_a){
        var _row = _a.parentNode.parentNode;		
        //如果不是第一行，则与上一行交换顺序
        var _node = _row.previousSibling;
        while(_node && _node.nodeType != 1){
            _node = _node.previousSibling;
        }
        if(_node){
            swapNode(_row,_node);

        }else {
			layer.open({
  				title: '信息提示'
				,icon: 6
				,content: '已经是最高优先级啦'
			});  
		}
    }
    function moveDown(_a){
        var _row = _a.parentNode.parentNode;
        //如果不是最后一行，则与下一行交换顺序
        var _node = _row.nextSibling;
        while(_node && _node.nodeType != 1){
            _node = _node.nextSibling;
        }
        if(_node){
            swapNode(_row,_node);
        }else {
			layer.open({
  				title: '信息提示'
				,icon: 6
				,content: '已经是最低优先级啦'
			});  
		}
    }
    function swapNode(node1,node2){
		
        //获取父结点
        var _parent = node1.parentNode;
        //获取两个结点的相对位置
        var _t1 = node1.nextSibling;
        var _t2 = node2.nextSibling;
        //将node2插入到原来node1的位置
        if(_t1)_parent.insertBefore(node2,_t1);
        else _parent.appendChild(node2);
        //将node1插入到原来node2的位置
        if(_t2)_parent.insertBefore(node1,_t2);
        else _parent.appendChild(node1);


		var fwNum = $('.fwLists');
		var order = [];
		var orderBtn = 1;
		for(var j = 0; j < fwNum.length; j++){				
			var s= $(fwNum[j]).attr('order');
			order.push(s);					
		}
		console.log(order);
		order.reverse();
		var orderStr = order.join(":");
		console.log(orderStr);
		var orderform = 'forwards_snames=' + orderStr + '&but_reoforwards=' + orderBtn ;
      	registPost(orderform);
    }
	/*
	**端口转发新增按钮添加
	**且校验: 判断非空/判断端口参数整正数, 在0-65535之间/判断IP地址合法性
	*/
    $('.addPortBtn').on('click',function () {
		$('.addPortClick').val(1);
		var portName = $('.forwards_add_name').val();
		var outport = $('.forwards_add_src_dport').val();
		var innerIP = $('.forwards_add_dest_ip').val();
		var innerport = $('.forwards_add_dest_port').val();

		var reg = /(^[1-9]\d*$)/;
		var regIP = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
		
		if((portName=='')||(outport=='')||(innerIP=='')||(innerport=='')){
            		layer.open({
                		title: '提示信息'
                ,content: '输入内容不能为空,请重新输入'
            });
            return false;
        }else{
			if((!reg.test(outport))||(!reg.test(innerport))){
				layer.open({
                			title: '提示信息'
                	,content: '输入内容不是正整数,请重新输入'
            	});
            	return false;
			} else if(!regIP.test(innerIP)){
				layer.open({
                			title: '提示信息'
                	,content: '请输入正确的IP地址'
            	});
            	return false;				
			} else{
				if((outport > 65535)||(innerport > 65535)){
					layer.open({
            			title: '提示信息'
        	        	,content: '请输入正确的端口值'
    	        	});
	            	return false;	
				} else{
					$('.forwards_add_name').val();
    			    addPortPost();
			        event.preventDefault();
				}				
			}			
		}		
    });

    function addPortPost () {
        $.ajax({
            type: "post",
            url: "<%=REQUEST_URI%>",
            data: $('#addPortChange').serialize()
        }).success(function(message) {
            console.log(message);
		    window.location.reload();
        }).fail(function(err){
            console.log(err);
        })
    }
	
	/*
	**mac地址过滤删除
	*/
	$('.MACDelete').on('click',function () {	
		var sname = $(this).attr('name');	
		var m_f_Param = 'macfilter_sname=' + sname + '&but_remmacfilter=1';		
        macFilterDel(m_f_Param);
        event.preventDefault();
    });

    function macFilterDel (params) {
        $.ajax({
            type: "post",
            url: "<%=REQUEST_URI%>",
            data: params
        }).success(function(message) {
            console.log(message);
		    window.location.reload();
        }).fail(function(err){
            console.log(err);
        })
    }
	/*
	**mac地址过滤添加
	**且校验: 判断非空/MAC地址合法性
	*/
	$('.addMACFilterBtn').on('click',function () {			
		$('.addMacClick').val(1);
		var macreg = /^([A-Fa-f0-9]{2}:){5}[A-Fa-f0-9]{2}$/;
		var macInput = $('.macfilter_add_src_mac').val();
		if(macInput==''){
            		layer.open({
                		title: '提示信息'
                ,content: '输入内容不能为空,请重新输入'
            });
            return false;
        }else {
			if(!macreg.test(macInput)){
				layer.open({
					title: '提示信息'
					,content: '请输入合法的MAC地址'
				});
			} else {
				macFilterAdd();
        			event.preventDefault();
			}
		}		
    });

    function macFilterAdd () {
        $.ajax({
            type: "post",
            url: "<%=REQUEST_URI%>",
            data: $('#macAddForm').serialize()
        }).success(function(message) {
            console.log(message);
		    window.location.reload();
        }).fail(function(err){
            console.log(err);
        })
    }
	/*
	**域名过滤删除
	*/
	$('.dnDelete').on('click',function () {
		var removeDn = $(this).siblings().val();
		var rem_dn_Param = 'but_remdn=1&dn_rem_str=' + removeDn;		
        dnFilterDel(rem_dn_Param);
        event.preventDefault();
    });

    function dnFilterDel (params) {
        $.ajax({
            type: "post",
            url: "<%=REQUEST_URI%>",
            data: params
        }).success(function(message) {
            console.log(message);
		    window.location.reload();
        }).fail(function(err){
            console.log(err);
        })
    }
	/*
	**域名过滤添加
	**且校验: 判空检验
	*/
	$('.addDomainFilterBtn').on('click',function () {					
		$('.adddnClick').val(1);
		var dnInput = $('.fWDomainInput').val();
		if(dnInput==''){
            layer.open({
                title: '提示信息'
                ,content: '输入内容不能为空,请重新输入'
            });
            return false;
        } else {
	        	dnFilterAdd();
        		event.preventDefault();			
		}
    });

    function dnFilterAdd () {
        $.ajax({
            type: "post",
            url: "<%=REQUEST_URI%>",
            data: $('#addDomainForm').serialize()
        }).success(function(message) {
            console.log(message);
		    window.location.reload();
        }).fail(function(err){
            console.log(err);
        })
    }
	/*
	**dmz删除
	*/
	$('.dmzDelete').on('click',function () {
		var removeDmz = $(this).attr("name");
		var rem_dmz_Param = 'but_remdmz=1&dmz_sname=' + removeDmz;		
        dmzFilterDel(rem_dmz_Param);
        event.preventDefault();
    });

    function dmzFilterDel (params) {
        $.ajax({
            type: "post",
            url: "<%=REQUEST_URI%>",
            data: params
        }).success(function(message) {
            console.log(message);
		    window.location.reload();
        }).fail(function(err){
            console.log(err);
        })
    }
	/*
	**dmz过滤添加
	**且校验: 判空检验
	*/
	$('.addDMZBtn').on('click',function () {					
		$('.adddmzClick').val(1);
		var dmzInput = $('.fWDMZInput').val();
		var regIPv4 = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;

		if(dmzInput==''){
            layer.open({
                title: '提示信息'
                ,content: '输入内容不能为空,请重新输入'
            });
            return false;
        } else {
			if(!regIPv4.test(dmzInput)){
				layer.open({
                	title: '提示信息'
                	,content: '请输入正确的IP地址'
            	});
            	return false;				
			} else {
				dmzFilterAdd();
		        	event.preventDefault();			
			}
	        
		}
    });

    function dmzFilterAdd () {
        $.ajax({
            type: "post",
            url: "<%=REQUEST_URI%>",
            data: $('#addDmzForm').serialize()
        }).success(function(message) {
            console.log(message);
		    window.location.reload();
        }).fail(function(err){
            console.log(err);
        })
    }

</script>
<%+footer%>